import EventMgr from "@/core/EventMgr";
import { currentGridInfo } from "../playground/backgroundCanvas";
// import PlayGroundCanvas, { currentGridInfo } from "../backgroundCanvas";
import StructElement, { ElementLocationSizeMap,currentPlayGround } from "./StructElement";
import {ToolBarInfos} from "../toolBar/toolBar"
import {getFinalLocationByAbsoluteLocation}from "@/core/locationService"
let currentWidth = 0,
    currentHeight = 0,
    currentClientX = 0,
    currentClientY = 0;
const ActiveMovePointBackgroundColor = "#9bcffe",
    MovePointBackgroundColor = "#fff";
export function registryReSizeEvent(
    this:StructElement,
    targetElement: HTMLElement){
        const evtMgr = new EventMgr(targetElement);
        const self = this;
        currentWidth = this.getCurrentElement().offsetWidth;
        currentHeight = this.getCurrentElement().offsetHeight;
        currentClientX = 0;
        currentClientY = 0;



        evtMgr.addEventListener("mousemove",function(this:HTMLElement,ev){
            if (Math.abs(this.offsetHeight - (<MouseEvent>ev).offsetY) <= 10 && Math.abs(this.offsetWidth - (<MouseEvent>ev).offsetX) <= 10) {
                this.style.cursor = "se-resize";
                self.getBottomSizePointElement().style.background = ActiveMovePointBackgroundColor;
                self.getRightSizePointElement().style.background = ActiveMovePointBackgroundColor;
                self.getRbSizePointElement().style.background = ActiveMovePointBackgroundColor;
                self.reSizeMethod = "both";
            } else if (Math.abs(this.offsetWidth - (<MouseEvent>ev).offsetX) <= 10) {
                this.style.cursor = "e-resize"
                self.getRightSizePointElement().style.background = ActiveMovePointBackgroundColor;
                self.reSizeMethod = "toRight";
            } else if (Math.abs(this.offsetHeight - (<MouseEvent>ev).offsetY) <= 10) {
                this.style.cursor = "s-resize";
                self.getBottomSizePointElement().style.background = ActiveMovePointBackgroundColor;
                self.reSizeMethod = "toBottom";
            } else {
                self.getRightSizePointElement().style.background = MovePointBackgroundColor;
                self.getBottomSizePointElement().style.background = MovePointBackgroundColor;
                self.getRbSizePointElement().style.background = MovePointBackgroundColor;
                self.reSizeMethod = null;
                this.style.cursor = "move";
            }
        });
        evtMgr.addEventListener("mouseout",function(ev){
            self.getRightSizePointElement().style.background = "#fff"
            self.getBottomSizePointElement().style.background = "#fff"
            self.getRbSizePointElement().style.background = "#fff"
        });

        evtMgr.addEventListener("mousedown",function(ev){
            self.reSizing = self.reSizeMethod;
            currentWidth = self.getCurrentElement().offsetWidth,
            currentHeight = self.getCurrentElement().offsetHeight,
            currentClientX = (<MouseEvent>ev).clientX;
            currentClientY = (<MouseEvent>ev).clientY;
        });


}

export function registryContainerEvent(
    this:StructElement,
    targetElement: HTMLElement){
        const evtMgr = new EventMgr(targetElement);
        const drageEvtMgr =   new EventMgr(this.getCurrentElement());
        const self = this;
        function getCss(ele: HTMLElement, prop: any) {
            return parseInt(window.getComputedStyle(ele)[prop]);
        }
        var initX: number = 0,
            initY: number = 0,
            dragable = false,
            drag = this.getCurrentElement(),
            wrapLeft = getCss(drag, "left"),
            wrapRight = getCss(drag, "top");


        drageEvtMgr.addEventListener("mousedown", function (e) {
            self.active();
            if(drag.offsetWidth - (<MouseEvent>e).offsetX > 10 && drag.offsetHeight - (<MouseEvent>e).offsetY > 10){
                dragable = true;
                initX = (<MouseEvent>e).clientX;
                initY = (<MouseEvent>e).clientY;
            }
        });
        evtMgr.addEventListener("mousemove",function(e){
            if (dragable) {
                const nowX = (<MouseEvent>e).clientX,
                    nowY = (<MouseEvent>e).clientY,
                    disX = nowX - initX,
                    disY = nowY - initY,
                    leftLocation = wrapLeft + disX,
                    topLocation = wrapRight + disY,
                    currentEventTarget = <HTMLElement>e.target;
                if (!currentEventTarget)
                    return;
                // let nextTop = ElementLocationSizeMap.get(drag)?.top || 0,
                //     nextLeft = ElementLocationSizeMap.get(drag)?.left || 0;
                // nextLeft = Math.round(leftLocation / currentGridInfo.gridWidth);
                // nextTop = Math.round(topLocation / currentGridInfo.gridHeight);
                let left = ElementLocationSizeMap.get(drag)?.left || 0,
                    top = ElementLocationSizeMap.get(drag)?.top || 0;
                    drag.style.left = leftLocation + "px";
                    drag.style.top = topLocation + "px";
                const locationInfo = getFinalLocationByAbsoluteLocation(leftLocation,
                    topLocation,
                    currentPlayGround.getPlayGroundSize().width,
                    currentPlayGround.getPlayGroundSize().height,
                    drag.offsetWidth,
                    drag.offsetHeight,
                    currentGridInfo.gridWidth,
                    currentGridInfo.gridHeight,
                    currentGridInfo.waterTank);
                debounce(() => {
                    currentPlayGround.addShadowStyle(
                        locationInfo.unitLeft,
                        locationInfo.unitTop,
                        locationInfo.unitWidth,
                        locationInfo.unitHeight);
                        // ElementLocationSizeMap.get(drag)?.width || 0,
                        // ElementLocationSizeMap.get(drag)?.height || 0);
                }, 100)();
                // ElementLocationSizeMap.set(drag, {
                //     top: locationInfo.unitTop,
                //     left: locationInfo.unitLeft,
                //     width: locationInfo.unitWidth,
                //     height: locationInfo.unitHeight,
                // })
            }
        })
        evtMgr.addEventListener("mousemove",function(env){
            if(!self.reSizing)
            return;
            const reSizeFunc ={
                toRight(){
                    self.getCurrentElement().style.width = ((<MouseEvent>env).clientX - currentClientX + currentWidth) +"px";
                },
                toBottom(){
                    self.getCurrentElement().style.height = ((<MouseEvent>env).clientY - currentClientY + currentHeight)+"px";
                },
                both(){
                    self.getCurrentElement().style.width = ((<MouseEvent>env).clientX - currentClientX + currentWidth) +"px";
                    self.getCurrentElement().style.height = ((<MouseEvent>env).clientY - currentClientY + currentHeight)+"px";
                },
            }[self.reSizing];
            reSizeFunc();
        });

        evtMgr.addEventListener("mouseup", function (e) {
            dragable = false;
            self.reSizing = null;
            // let currentEventTarget = <HTMLElement>e.target;
            const left = parseFloat(drag.style.left.replace("px", "")),
                top = parseFloat(drag.style.top.replace("px", ""));


            const locationInfo = getFinalLocationByAbsoluteLocation(left,
                top,
                currentPlayGround.getPlayGroundSize().width,
                currentPlayGround.getPlayGroundSize().height,
                drag.offsetWidth,
                drag.offsetHeight,
                currentGridInfo.gridWidth,
                currentGridInfo.gridHeight,
                currentGridInfo.waterTank);
            // locationInfo
            drag.style.left = locationInfo.left+"px";
            drag.style.top = locationInfo.top+"px";
            const currentLocation = ElementLocationSizeMap.get(drag);
            if (!currentLocation)
                return;
            currentLocation.width = locationInfo.unitWidth;
            currentLocation.height = locationInfo.unitHeight;
            ElementLocationSizeMap.set(drag, {
                    top: locationInfo.unitTop,
                    left: locationInfo.unitLeft,
                    width: locationInfo.unitWidth,
                    height: locationInfo.unitHeight,
                })
            drag.style.width = locationInfo.width + "px";
            drag.style.height = locationInfo.height + "px";
            wrapLeft = getCss(drag, "left");
            wrapRight = getCss(drag, "top");
        });
}
let debounceTimer: number = 0 //借助闭包
function debounce(fn: Function, delay: number) {
    return function () {
        if (debounceTimer) {
            clearTimeout(debounceTimer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
            debounceTimer = setTimeout(fn, delay)
        }
        debounceTimer = setTimeout(fn, delay)
    }
}